import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 路由的使用
// 1、下载：npm i vue-router@3
// 2、引入路由
import VueRouter from "vue-router"
// 3、注册组件
Vue.use(VueRouter)
// 4、创建路由规则数组
import find from "./views/find.vue"
let routes = [
  {
    path: '/', // 默认的路由路径
    // 表示重定向到发现音乐页面
    // （就是当用户访问http://localhost:8080/#/会强制跳转到发现音乐页面）
    redirect: '/find' 
  },
  {
    path: "/find", // 定义路径
    component: find, // 注册路径对应的组件
    name: "find", // 路由名
  },
  {
    // path: "/my/:id", // 具有参数的路由对象叫 “动态路由”，这个参数表示必传值，一定要传了值才能访问到
    // 需求：参数如何做到可传可不传？答：可以在参数后面加上一个问号，此刻这个参数表示未可选参数(可传可不传)
    path: "/my/:id?",
    component: ()=>import("./views/my.vue"), // 按需导入组件-注册组件
    name: "my"
  },
  {
    path: "/friend",
    component: ()=>import("./views/friend.vue"),
    name: "friend"
  },
  { // 配置404页面 -- 当用户访问的路由路径不存在的时候，自动匹配并跳转到404页面
    path: "*", // * 表示匹配到任意的路由路径
    component: ()=>import("./views/NotFound.vue")
  }
]
// 5、路由路由规则生成路由对象
let router = new VueRouter({
  routes: routes, // 注意：键名routes是固定写法 不能改的，这个是路由对象提供的属性
  /**
   * 设置路由模式
   * 路由提供了2种模式来访问页面组件
   * 1、hash模式：我们访问页面的时候浏览器的url路径上需要加#
   * 2、history模式：我们访问页面的时候浏览器的url路径上没有#
   * 
   * 默认是hash模式
   * 
   * 他们的区别：
   * 1、外观不同，一个有#，一个没有#
   * 2、项目上线后history模式需要后端进行配置，hash是不需要的
   * 3、他们的实现原理不同
   *    hash模式: 利用锚点进行页面跳转
   *    history模式：利用history对象的相关方法实现页面跳转的
   * */ 
  mode: "history", 
})

new Vue({
  // 6、把路由对象注入到vue实例中
  router: router, // 注意：键名router是固定写法不能改的，这个是vue提供属性
  render: h => h(App),
}).$mount('#app')
